<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	div {float: left; margin: 10px;}
	#div1 {width: 50px; height: 50px; background: red;}
	#div2 {width: 100px; height: 200px; background: yellow; display: none;}
	
</style>
<script>
	window.onload = function (){
			var timer = null;
			var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			
			oDiv1.onmouseover=oDiv2.onmouseover = function()
			{
					clearTimeout(timer);
					oDiv2.style.display = 'block';
			};
		
			oDiv1.onmouseout = oDiv2.onmouseout = function(){
				  timer = setTimeout(function(){oDiv2.style.display ='none';},1000);
			};
				
	
	};
	
	
	
</script>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
